<ui:component xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:c="http://java.sun.com/jstl/core"
              xmlns:rich="http://richfaces.org/rich"
              xmlns:a4j="http://richfaces.org/a4j"
              xmlns:common="http://www.contact.common.com/contacts/ui"
              xmlns:core="http://www.contact.core.com/contacts/core/ui"
              xmlns:msn="http://www.contact.messanger.com/contacts/msn/ui"
        >
    <!--@elvariable id="chatRoom" type="rs.contacts.core.core.msn.ChatRoom"-->
    <!--@elvariable id="width" type="java.lang.String"-->
    <!--@elvariable id="height" type="java.lang.String"-->

    <h:panelGroup layout="block" style="padding-right:3px;width:#{width eq null ? 'auto' : width};">
            <a4j:outputPanel id="scrollbox#{chatRoom.uniqueKey}"
                             layout="block"
                             style="padding-left:3px;padding-top:3px;padding-bottom:3px;height:#{height eq null ? 'auto' : height}; width:100%; max-width:100%; overflow-y:auto; overflow-x:hidden;"
                             onclick="#{common:inViewElement('msgbox')}.focus();"
                    >
                <h:panelGroup id="chatwindow"
                              layout="block" 
                              style="width:100%; max-width: 100%; word-wrap:break-word; text-align:left; float:left;"
                        >
                    <c:forEach items="#{chatRoom.chatMessages}" var="msg">

                        <h:outputText style="font-weight:bold" value="#{msg.userName}: "/>

                        <h:outputText value="#{msn:reformatMessage(msg.message)}" escape="false"/>
                        <br/>
                    </c:forEach>
                    <h:outputText value="#{resources.chatwindowNoOneInRoomText}"
                                  rendered="#{not chatRoom.notEmpty and not empty chatRoom.chatMessages}"/>
                        <script type="text/javascript">
                        //<![CDATA[
                           scrollRoom#{chatRoom.uniqueKey}();
                        //]]>
                        </script>
                </h:panelGroup>
                <script type="text/javascript">
                //<![CDATA[
                 #{rich:element( common:concat('scrollbox', chatRoom.uniqueKey) )}.scrollTop =
                                #{rich:element( common:concat('scrollbox', chatRoom.uniqueKey) )}.firstChild.scrollHeight;
                 function scrollRoom#{chatRoom.uniqueKey}()
                 {
                        var scrollbox = #{rich:element( common:concat('scrollbox', chatRoom.uniqueKey) )};
                        var chatwindow = scrollbox.firstChild;
                        var currentHeight = 0;

                        if (scrollbox.scrollHeight > 0)
                        {
                            currentHeight = scrollbox.scrollHeight;
                        }
                        else
                        {
                            if (chatwindow.offsetHeight > 0)
                                currentHeight = scrollbox.offsetHeight;
                        }
                        if (currentHeight - scrollbox.scrollTop < ((scrollbox.style.pixelHeight) ? scrollbox.style.pixelHeight : scrollbox.offsetHeight) * 1.5)
                            scrollbox.scrollTop = currentHeight;
                 }
            //]]>               
            </script>
            </a4j:outputPanel>
            <rich:separator lineType="solid" height="1px" width="100%" align="center"/>

            <h:inputTextarea rows="2" style="padding-left:1px;padding-top:3px;padding-bottom:3px;height:35px;width:100%"
                             id="msgbox" value="#{chatRequestBean.message}"
                      onkeypress="
                      var charCode = (event.which) ? event.which : window.event.keyCode;
                      var isShift = (event.which) ? event.shiftKey : window.event.shiftKey;
                        if (charCode == 13)
		                    if (!isShift)
		                        submitRoom#{chatRoom.uniqueKey}();"
                      />
                <a4j:jsFunction name="submitRoom#{chatRoom.uniqueKey}" focus="msgbox" action="#{chatRequestBean.sendMessage}" reRender="msgbox, chatwindow" limitToList="true">
                    <f:setPropertyActionListener value="#{chatRoom.uniqueKey}" target="#{chatRequestBean.roomKey}"/>
                </a4j:jsFunction>

    </h:panelGroup>


</ui:component>